<template>
	<view class="main-app">

		<view role="dialog" aria-modal="true" class="fade modal-container  show" tabindex="-1" style="display: block;">
			<view class="   modal-fullscreen"
				style="display: flex;flex-direction: column;min-height: calc(100% - var(--bs-modal-margin)*2)">
				<u-tabs :list="list" @click="click" lineColor="#f1c594" :activeStyle="{ color: '#f1c594' }"
					:inactiveStyle="{ color: '#c1d1ff' }"></u-tabs>

				<view class=" col-12 col " style=" display: flex;align-items: center; flex-direction: column;">
					<view class="profile-menu-container" style="width:70%;margin-top: 30rpx;" v-if="account_type=='2'"
						@click="goTransfer">
						<view class="menu-card row" style="text-align: center;">
							<label>{{$t('Transfer_money')}}</label>
						</view>
					</view>
					<view class="profile-menu-container" style="width:70%;margin-top: 30rpx;" v-if="account_type=='3'"
						@click="goTransferRut">
						<view class="menu-card row" style="text-align: center;">
							<label>{{$t('Transfer_money')}}</label>
						</view>
					</view>
					<!-- <view class="profile-menu-container" style="width:70%;margin-top: 30rpx;" v-if="account_type=='3'"
						@click="goWithdraw">
						<view class="menu-card row" style="text-align: center;">
							<label>{{$t('Withdraw')}}</label>
						</view>
					</view> -->
					<view
						style="display: flex;width: 100%;justify-content: center;color: #f1c594;margin-top: 30rpx;margin-bottom: 30rpx;font-size: 24rpx;">
						{{getStatistics()}} : {{sums}}
					</view>
					<view>
						<view class="col-12 p-0 col">
							<view class="card-history mt-2 card" style="margin:0 20rpx;min-width: 700rpx;"
								v-for="(item,index) in memberOrderList" :key="index">
								<view class="history-container">
									<view style="padding: 0.5em 0.3em;">
										<view class="m-0 border-bottom align-items-center row">
											<view class="col"><label>{{item['create_time']}}</label></view>
											<view class="text-center col"><label>{{$t('buy_num')}}
													<br>{{item['number']}}</label>
											</view>
											<view class="text-center col"><label>{{$t('Description')}}
													<br>{{item['text']}}</label>
											</view>

										</view>
									</view>
								</view>
							</view>
							<view class="uni-pagination-box" v-if="memberOrderList.length>0" style="margin-top: 20rpx;">
								<UniPagination :page-size="pageSize" :current="pageIndex" :total="total"
									@change="change" />
							</view>
						</view>
					</view>
				</view>
			</view>


		</view>
		<view v-if="memberOrderList.length==0">
			<view class="listing-container">
				<view class="d-flex justify-content-center m-0 row">
					<view class="w-auto pt-5 pb-5 mt-5 mb-5 d-grid"><span
							class="text-center text-empty pt-3">{{$t('No_record')}}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<u-loadmore v-show="loadn&&memberOrderList.length>0" :loadmoreText="loadText" marginBottom="40" fontSize="12"
			color="rgba(193, 209, 255, .4)" lineColor="rgba(193, 209, 255, .4)" /> -->
	</view>
</template>

<script>
	import UniPagination from "@/components/UniPagination.vue"
	export default {
		components: {

			UniPagination
		},
		onLoad: function(options) {
			if (options.account_type) {
				this.account_type = options.account_type
				if (this.account_type == '2') {
		
					this.list.push({
						name: this.$t('Month_records')
					})
				}
				if (this.account_type == '3') {
					this.list.push({
						name: this.$t('Blind_box_recording')
					})
					
				}
			}

		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.getMemberList()
				this.setTitle()
			}
		},
		data() {
			return {
				pageSize: 20,
				select: 0,
				list: [{
						name: this.$t('Financial_records'),
					},
					{
						name: this.$t('Direct_record'),
					},
					{
						name: this.$t('Management_record'),
					},
					{
						name: this.$t('Parallel_recording'),
					},
					// {
					// 	name: this.$t('Common_row_record'),
					// },
					{
						name: this.$t('Dividend_record'),
					},
					{
						name: this.$t('Node_record'),
					},
			
				],
				sums: 0,

				statisticsList: [
					this.$t('Financial_statistics'),
					this.$t('Direct_statistics'),
					this.$t('Management_statistics'),
					this.$t('Parallel_statistics'),
					
					this.$t('Dividend_statistics'),
					this.$t('Node_row_statistics'),
					this.$t('Blind_box_statistics'),
					this.$t('Monthly_fee_statistics'),
				],
				status: 'loading',
				loadText: '',
				account_type: '',
				loadn: false,
				webURL: "",
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				scrollTop: 0.5,
				productList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				type: '',
				pageIndex: 1,
				userinfo: {
					'user_tel': this.$t('please_log_in'),
					'referee': this.$t('please_log_in'),
					'user_headimg': '/static/images/my/mine_def_touxiang_3x.png',
				},
				account: '',
				code: '',
				message: this.$t('not_open'),
				memberOrderList: [],
				from_type: 1,
			}
		},

		methods: {
			setTitle() {
				uni.setNavigationBarTitle({
					title: this.$t('Transaction-records')
				});
			},
			// 分页触发
			change(e) {
				// this.$refs.table.clearSelection()
				this.pageIndex = e.current
				this.getMemberList(e.current)
			},
			click(item) {
				this.select = item.index
				this.pageIndex = 1
				this.loadn = false
				this.memberOrderList = []
				switch (this.select) {
					case 0:
						this.from_type = 1
						break
					case 1:
						this.from_type = 15
						break
					case 2:
						this.from_type = 16
						break
					case 3:
						this.from_type = 11
						break
					case 4:
						this.from_type = 6
						break
					case 5:
						this.from_type = 23
						break
					case 6:
						this.from_type = 14
						break
						case 7:
							this.from_type = 23
							break
				}
			
				this.getMemberList()
			},
			//获取统计
			getStatistics() {
				if(this.select=='6' && this.account_type==2){
					return this.statisticsList[7]
				}
				if(this.select=='6' && this.account_type==3){
					return this.statisticsList[6]
				}
				switch (this.select) {
					case 0:
						return this.statisticsList[0]
						break
					case 1:
						return this.statisticsList[1]
						break
					case 2:
						return this.statisticsList[2]
						break
					case 3:
						return this.statisticsList[3]
						break
					case 4:
						return this.statisticsList[4]
						break
					case 5:
						return this.statisticsList[5]
						break
					case 6:
						return this.statisticsList[6]
						break
						case 7:
							return this.statisticsList[7]
							break
				}
			},
			getMemberList() {
				let boxData = {
					page: this.pageIndex,
					account_type: this.account_type,
					from_type: this.from_type
				};
				let memberOrder = this.tui.request('/api/user/bill', 'post', boxData, 1000, 1, '',
					'bill');
				Promise.resolve(memberOrder).then((value) => {
					if (value.code == 200) {
						this.sums = value.data.sums
						this.memberOrderList = value.data.data
						this.total = value.data.total_count
						// if (this.pageIndex == 1) {
						// 	this.memberOrderList = value.data.data
						// } else {
						// 	this.memberOrderList = this.memberOrderList.concat(value.data.data)
						// }

						// if (this.pageIndex < value.data.page_count) {
						// 	this.loadText = this.$t('load_more')
						// 	this.pageIndex++

						// } else {
						// 	this.loadText = this.$t('Have_end')
						// 	this.loadn = true
						// }

					}
				})
			},
			goTransfer() {
				uni.navigateTo({
					url: '/pages/my/transferMoney'
				})
			},
			goTransferRut() {
				uni.navigateTo({
					url: '/pages/my/transferRutMoney'
				})
			},
			goWithdraw() {
				uni.navigateTo({
					url: '/pages/my/rutwithdraw'
				})
			},
			back() {
				uni.navigateBack()
			},


		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onReachBottom: function() {
			if (this.loadn) {
				return
			}
			// this.getMemberList()
		},

	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #252C46;
	}

	.main-app {
		overflow-y: auto;
	}

	.activate-button {
		margin-bottom: 20rpx;
		display: flex;
		width: 100px;
		height: 28px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
		border: none;
		background: var(--Gold-Gradient, linear-gradient(180deg, #fbe5d8 0, #f1c594 100%));
		color: #303a5e !important
	}
</style>